<template>
	<view class="header">
	    <view class="back" @click="backIndex">
	        <svg t="1671784173054" class="icon" viewBox="0 0 1024 1024" version="1.1"
	            xmlns="http://www.w3.org/2000/svg" p-id="2679" width="20" height="20">
	            <path d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z"
	                p-id="2680" fill="#ffffff"></path>
	        </svg>
	    </view>
	    <view class="fun">
	        <svg t="1671784328380" class="icon" viewBox="0 0 1024 1024" version="1.1"
	            xmlns="http://www.w3.org/2000/svg" p-id="3795" width="20" height="20">
	            <path d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
	                fill="#ffffff" p-id="3796"></path>
	        </svg>
	        <svg t="1671784353100" class="icon" viewBox="0 0 1024 1024" version="1.1"
	            xmlns="http://www.w3.org/2000/svg" p-id="4929" width="20" height="20">
	            <path d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z"
	                fill="#ffffff" p-id="4930"></path>
	        </svg>
	    </view>
	</view>
	<view class="background">
		<!-- <image src="../../static/demoBackGround.jpg" mode="aspectFill"></image> -->
		<view class="avatar">
			<image src="../../static/logo.png"></image>
		</view>
		<view class="nameNumber">
			<view class="name">
				fbk
			</view>
			<view class="number">
				抖音号:11111111
			</view>
		</view>

	</view>
	<view class="introduce">
		<view class="first">
			<view>
				<text class="big">200.8万</text><text class="small">获赞</text>
			</view>
			<view>
				<text class="big">700</text><text class="small">关注</text>
			</view>
			<view>
				<text class="big">3.2万</text><text class="small">粉丝</text>
			</view>

		</view>
		<view class="message">
			谢谢你的关注
		</view>
		<view class="span">
			<text>20岁</text><text>ip:山东</text><text>清华大学</text>
		</view>
		<view class="attention">
			<button class="first"><svg t="1671680035383" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="7365" width="20" height="20">
					<path
						d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
						fill="#ffffff" p-id="7366"></path>
				</svg>关注</button><button class="second"><svg t="1671679781092" class="icon" viewBox="0 0 1024 1024"
					version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6433" width="20" height="20">
					<path
						d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z"
						fill="#000000" p-id="6434"></path>
				</svg></button>
		</view>
		<view class="writeAndLove">
			<view class="write">
				作品
			</view>
			<view class="love">
				喜欢
			</view>
		</view>
	</view>

	<view class="videoListStyle">
		<view v-for="(item,index) in videoList" :key="index">
			<video @play="videoPlay(item.video,index)" class="videoItem" :src="item.video" object-fit="cover"
				:play-btn-position="false" :controls="false"></video>

		</view>
	</view>
	
	<uni-popup ref="videoPopup" :show="isShowPop">
		<videoListVue @changePop="changePop"/>
	</uni-popup>
	<videoComponent/>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from "vue";
	import {goHome} from '../../utils/nagivatorJump.js'
	import videoListVue from '../../components/videoList.vue'
	import videoComponent from '../../components/videoComponent.vue'
	components: {
		videoListVue,
		videoComponent
	}
	const backIndex=()=>{
		goHome()
	}
	const videoList = reactive([{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			video: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		}
	])
	const videoPopup = ref(null)
	let expandSrc = ref(null)
	let videoContext=ref(null)
	const videoPlay = (video, id) => {
		expandSrc.value = video
		videoPopup.value.open('bottom')
		videoContext.value=uni.createVideoContext(id)
	}
	let isShowPop=ref(false)
	const changePop=(value)=>{
	    // videoContext.pause()
		videoPopup.value.close()
	}
</script>

<style scoped lang="scss">
	* {
		padding: 0px;
		margin: 0px;
	}
	.header {
		width: 100%;
		height: 30px;
		position: fixed;
		right: 0px;
		top: 0px;
		left: 0px;
		z-index: 1000;

		.back {
			width: 30px;
			height: 30px;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.fun {
			width: 60px;
			height: 30px;
			display: flex;
			float: right;
			align-items: center;
			justify-content: space-around;
		}
	}
	.background {
		width: 100%;
		height: 200px;
		background-image: url(../../static/demoBackGround.jpg);
		background-position: center, center;
		background-repeat: no-repeat;
		display: flex;
		align-items: flex-end;
		padding-bottom: 20px;
		padding-left: 20px;

		.avatar {
			width: 80px;
			height: 80px;
			background-color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 95%;
				height: 95%;
				border-radius: 95%;
			}
		}

		.nameNumber {
			color: white;
			height: 80px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20px;
		}

		.name {
			font-size: 25px;
			font-weight: 1000;
		}

		.number {
			color: darkgrey;
			font-weight: 100;
			font-size: 5px;
		}
	}

	.introduce {
		width: 100%;
		// height: 160px;
		background-color: white;

		border-top-left-radius: 20px;
		border-top-right-radius: 20px;

		.first {
			width: 95%;
			margin: 0 auto;
			height: 50px;
			display: flex;

			view {
				margin-top: 5px;
				margin-left: 5px;
				margin-right: 5px;
			}

			.small {
				font-size: 10px;
				font-weight: 200;
			}

			.big {
				font-weight: 1000;
			}
		}

		.message {
			width: 95%;
			margin: 0 auto;
			height: 50px;
			position: relative;
			overflow: hidden;
		}

		.message::after {
			position: absolute;
			content: '...';
			bottom: 0;
			right: 0;
			padding: 0 20px 0 10px;
		}

		.span {
			width: 95%;
			margin: 0 auto;
			height: 30px;
			font-size: 5px;

			text {
				padding: 2px;
				height: 30px;
				background-color: black;
				margin-left: 5px;
				margin-top: 5px;
				margin-right: 5px;
				border-radius: 3px;
				background-color: #e2deda
			}
		}

		.attention {
			width: 95%;
			margin: 0 auto;
			height: 30px;
			display: flex;
			justify-content: space-around;

			.first {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30px;
				width: 80%;
				color: white;
				background-color: red;
			}

			.second {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 15%;
				height: 30px;
			}
		}

		.writeAndLove {
			width: 95%;
			margin: 0 auto;
			height: 30px;
			display: flex;
			margin-bottom: 10px;

			.write {
				border-bottom: 2px solid black;

			}

			view {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.videoListStyle {
		width: 100%;
		height: 1000px;
		display: grid;
		grid-template-columns: repeat(3, 33.3%);
		grid-template-rows: repeat(5, 20%);

		view {

			.videoItem {
				width: 100%;
			}
		}
	}

	.popStyle {
		width: 100%;
		height: 1000px;
		background-color: black;
		display: flex;
		align-items: center;

		video {
			width: 100%;

		}
	}
</style>
